<template>
	<view class="list">
		<view class="item" v-for="item,index in data" :key="index" @tap="toDouban(item.info.url)">
			<view class="pic">
				<image :src="item.info.imgurl" mode=""></image>
			</view>
			<view class="content">
				<view class="title">{{item.title}}</view>
				<view class="pingjia">{{item.info.pingfen}}/{{item.info.pingjia}}</view>
				<view class="yanyuan">{{item.info.yanyuan}}</view>				
			</view>
		</view>
		
	</view>
</template>

<script setup>
	 import {
	 	ref
	 } from "vue"
	 import {
	 	onLoad
	 } from "@dcloudio/uni-app"
	 
	 onLoad(()=>{
		getDouban() 
	 })
	 const data=ref([])
	 async  function getDouban()
	 {
		 let res=await uni.$get("https://api.vvhan.com/api/douban")
		 console.log(res)
		 data.value=res.data.data
	 }
	 function toDouban(url)
	 {
	       uni.navigateTo({
	       	url:"/pages/webview/webview?url="+url
	       })	 
	 }
</script>

<style lang="scss">
  .list{
	  .item{
		  border:1px solid #ccc;
		  margin: 5px;
		  padding: 5px;
		  display: flex;
		  justify-content: space-around;
		  .pic{
			  width: 200rpx;
			  height: 300rpx;
			  image{
				  width: 100%;
				  height: 100%;
			  }
		  }
		  .content{
			  width: 500rpx;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-around;
			  margin-left: 5px;
			  .title{
				  font-size: 34rpx;
				  font-weight: bold;
				  color: #005500;
			  }
			  .pingjia{
				  font-size: 30rpx;
				  color: #666;
			  }
			  .yanyuan{
				 font-size: 30rpx;
				 color: #666; 
				 /* 下面的样式设置显示两行超出用省略号表示 */
				 overflow: hidden;
				 -webkit-line-clamp: 4;
				 text-overflow: ellipsis;
				 display: -webkit-box;
				 -webkit-box-orient: vertical;
			  }
		  }
	  }
  }
</style>
